<!DOCTYPE html>
<html>
  <head>
    <title>TEST</title>
   <meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
 
 <style>
  .content2{padding:150px 0 150px 0;}
 </style>
 <script>
  (function($) {
    var methods = {
   init: function(options) {
     var settings = {
    callback: function() {}
     };
     if ( options ) {
    $.extend( settings, options );
     }
     // Select all of the pages and then attach the event listeners
     // 페이지 전체를 선택해서 이벤트 리스너를 등록합니다.
     $(":jqmData(role='page')").each(function() {
    
    $(this).bind("swipeleft", function() {
      // Get the current page number from the id and increment it by 1.
      // 현재 페이지의 id 에서 페이지 번호를 알아낸 다음 1을 더합니다.
      var nextPage = parseInt($(this).attr("id").split("page")[1]) +1;
      if (nextPage === 6) nextPage = 1;
      // Transition the page.
      // 페이지를 전환합니다.
      $.mobile.changePage("#page"+nextPage, "slide");
    });

    $(this).bind("swiperight", function() {
      // Get the current page number from the id and decrement it by 1.
      // 현재 페이지의 id 에서 페이지 번호를 알아낸 다음 1을 뺍니다.
      var nextPage = parseInt($(this).attr("id").split("page")[1]) -1;
      if (nextPage === 0) nextPage = 5;
      // Transition the page.
      // 페이지를 전환합니다.
      $.mobile.changePage("#page"+nextPage, "slide", true);
    });
     });

   }
    }
    $.fn.initApp = function(method) {
   // Method calling logic
   // 메서드 호출
   if ( methods[method] ) {
     return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
   } else if ( typeof method === 'object' || !method ) {
     return methods.init.apply( this, arguments );
   } else {
     $.error( 'Method ' +  method + ' does not exist' );
   }
    }
  })(jQuery);
  $(document).ready(function() {
    $().initApp();
  })
 </script>

  </head>

  <body>
 <!-- 첫 페이지 시작 -->
  <div data-role="page" id="page1" data-ajax="false">
   <div data-role="header"  data-id="foo1" >
    <h1>page1</h1>
    <div data-role="navbar" >
     <ul>
      <li><a href="#page1" class="ui-btn-active">page1</a></li>
      <li><a href="#page2">page2</a></li>
      <li><a href="#page3">page3</a></li>
      <li><a href="#page4">page4</a></li>
      <li><a href="#page5">page5</a></li>
     </ul>
    </div>
   </div>

   <div data-role="content">
    <div class="content2">
     <h2>page1<h2>
    </div>
   </div>

   <div data-role="footer" data-position="fixed">
    <p>FOOTER</p>
   </div>
  </div>
 <!-- 첫 페이지 끝 -->

 <!-- 2 페이지 시작 -->
  <div data-role="page" id="page2" data-ajax="false">
   <div data-role="header"  data-id="foo1" >
    <h1>page2</h1>
    <div data-role="navbar" >
     <ul>
      <li><a href="#page1">page1</a></li>
      <li><a href="#page2"  class="ui-btn-active">page2</a></li>
      <li><a href="#page3">page3</a></li>
      <li><a href="#page4">page4</a></li>
      <li><a href="#page5">page5</a></li>
     </ul>
    </div>
   </div>

   <div data-role="content">
    <div class="content2">
     <h2>page2<h2>
    </div>
   </div>

   <div data-role="footer" data-position="fixed">
    <p>FOOTER</p>
   </div>
  </div>
 <!-- 2 페이지 끝 -->

 <!-- 3 페이지 시작 -->
  <div data-role="page" id="page3" data-fullscreen="true">
   <div data-role="header"  data-id="foo1" data-position="fixed" >
    <h1>page3</h1>
    <div data-role="navbar" >
     <ul>
      <li><a href="#page1">page1</a></li>
      <li><a href="#page2">page2</a></li>
      <li><a href="#page3"   class="ui-btn-active">page3</a></li>
      <li><a href="#page4">page4</a></li>
      <li><a href="#page5">page5</a></li>
     </ul>
    </div>
   </div>

   <div data-role="content">
    <div class="content2">
     <h2>page3<h2>
    </div>
   </div>

   <div data-role="footer" data-position="fixed">
    <p>FOOTER</p>
   </div>
  </div>
 <!-- 3 페이지 끝 -->

 <!-- 4 페이지 시작 -->
 <div data-role="page" id="page4" data-fullscreen="true">
  <div data-role="header"  data-id="foo1" data-position="fixed" >
   <h1>page4</h1>
   <div data-role="navbar" >
    <ul>
     <li><a href="#page1">page1</a></li>
     <li><a href="#page2">page2</a></li>
     <li><a href="#page3">page3</a></li>
     <li><a href="#page4" class="ui-btn-active">page4</a></li>
     <li><a href="#page5">page5</a></li>
    </ul>
   </div>
  </div>

  <div data-role="content">
   <div class="content2">
    <h2>page4<h2>
   </div>
  </div>

  <div data-role="footer" data-position="fixed">
   <p>FOOTER</p>
  </div>
 </div>
<!-- 4 페이지 끝 -->

 <!-- 5 페이지 시작 -->
 <div data-role="page" id="page5" data-fullscreen="true">
  <div data-role="header"  data-id="foo1" data-position="fixed" >
   <h1>page5</h1>
   <div data-role="navbar" >
    <ul>
     <li><a href="#page1">page1</a></li>
     <li><a href="#page2">page2</a></li>
     <li><a href="#page3">page3</a></li>
     <li><a href="#page4">page4</a></li>
     <li><a href="#page5"  class="ui-btn-active">page5</a></li>
    </ul>
   </div>
  </div>

  <div data-role="content">
   <div class="content2">
    <h2>page5<h2>
   </div>
  </div>

  <div data-role="footer" data-position="fixed">
   <p>FOOTER</p>
  </div>
 </div>
<!-- 5 페이지 끝 -->




  </body>
</html>

